<template>
	<a-row>
		<a-col :span="5">
			<a-card class="cardImp" :bordered="false" :loading="cardLoading">
				<a-tree
					v-if="treeData.length > 0"
					:tree-data="treeData"
					:field-names="treeFieldNames"
					v-model:selectedKeys="selectedKeys"
					:defaultExpandAll="treeData.length>0?true:false"
					@select="treeSelect"
				/>
				<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE"/>
			</a-card>
		</a-col>
		<a-col :span="19">
			<a-card :bordered="false" class="titleCard">
				<div>
					<a-button type="primary" class="rightButton" @click="addInit()">新增</a-button>
				</div>
			</a-card>
			<a-card>
				<div style="height: 50px;">
					<a-button type="primary" class="rightButton" @click="editDataOne()">保存</a-button>
				</div>
				<xn-editor v-if="tableData.length === 1" v-model="tableData[0].data" placeholder="请输入正文"
						   :height="500"></xn-editor>
				<a-table :dataSource="tableData" :columns="columns" :pagination="pagination" v-else>
					<template #bodyCell="{ column, text ,record }">
						<template v-if="column.dataIndex === 'action'">
							<a href="javascript:;" @click="editData(record)">编辑</a>

							<a href="javascript:;" style="color: red;margin-left: 10px" @click="deleteData(record.id)">删除</a>

						</template>
					</template>
				</a-table>

			</a-card>
		</a-col>
		<add-index-data ref="addIndexDataRef" @successful="getTableData"></add-index-data>
	</a-row>
</template>

<script setup>
import XnEditor from '@/components/Editor/index.vue'
import {Empty} from 'ant-design-vue'
import {isEmpty} from 'lodash-es'
import addIndexData from './addIndexData.vue'
import menuApi from "@/api/indexMenu/menuApi";

const addIndexDataRef = ref()
const treeData = ref([])
const treeFieldNames = {children: 'children', title: 'name', key: 'id'}
const selectedKeys = ref([])
const cardLoading = ref(false)
const tableData = ref([])
const pagination = ref({current: 1, total: 0, pageSize: 10})
const params = ref({id: 1})
const columns = [
	{
		title: '标题名称',
		dataIndex: 'title'
	},
	{
		title: '创建时间',
		dataIndex: 'createTime'
	},
	{
		title: '操作',
		dataIndex: 'action',
	},
]
const editDataOne = () => {
	menuApi.updateMenuData(tableData.value[0]).then(res => {
		getTableData()
	})
}
const addInit = () => {
	if (selectedKeys.value.length > 0) {
		addIndexDataRef.value.init(selectedKeys.value[0])
	}
}
const editData = (row) => {
	addIndexDataRef.value.edit(row)
}
const treeSelect = (data) => {
	if (data.length > 0) {
		getTableData()
	}
}
const deleteData = (id) => {
	menuApi.deleteData({id: id}).then(res => {
		getTableData()
	})
}
const getTableData = (parameter) => {
	if (selectedKeys.value.length > 0) {
		// console.log(selectedKeys.value[0])
		menuApi.getMenuData({
			id: selectedKeys.value[0],
			current: pagination.value.current,
			size: pagination.value.pageSize
		}).then((res) => {
			console.log(res)
			tableData.value = res.list
			pagination.value.total = res.total
		})
	}
}
// 加载左侧的树
const getTreeData = () => {
	menuApi.getMenuIndex().then((res) => {
		treeData.value = res
		cardLoading.value = false
		if (res !== null) {
			for (let i = 0; i < res.length; i++) {
				const treeDataOne = res[i];
				if (treeDataOne.key === 'index') {
					res.splice(i, 1)
				}
			}
			if (res.length > 0) {
				if (res[0].children.length > 0) {
					selectedKeys.value = [res[0].children[0].id]
				} else {
					selectedKeys.value = [res[0].id]
				}
			}
			getTableData()

		}
	})
}
getTreeData()
</script>

<style scoped>
.cardImp {
	margin-right: 10px;
}

.titleCard {
	margin-bottom: 10px;
}

.rightButton {
	float: right;
	margin-right: 20px;
}
</style>
